<template>
	<div class="layout-pd">
		<zh-header-toolbar>
			<zh-button style="margin-left: 6px" button-type="add" v-func:OPPERIOD0007 @click="initData">初始化 </zh-button>
			<zh-button style="margin-left: 6px" button-type="add" @click="addRow">新增一条 </zh-button>
			<zh-button style="margin-left: 6px" button-type="add" v-func:OPPERIOD0002 @click="save">保存 </zh-button>
			<zh-button style="margin-left: 6px" button-type="del" v-func:OPPERIOD0006 @click="clearAll">清除 </zh-button>
		</zh-header-toolbar>
		<zh-space style="padding-top: 10px">
			<zh-card title="">
				<zh-form ref="periodQueryFrom" :model="state.queryParam" :rules="state.rules">
          <zh-form-date prop="periodYear" label="所属年度" type="year" v-model="state.queryParam.periodYear"></zh-form-date>
					<zh-form-select
						prop="operating"
						v-model="state.queryParam.operating"
						label="操作期规则"
						:options="state.dictData.operating"
					></zh-form-select>
					<template v-if="state.advanced">
						<zh-form-date label="业务年月" prop="ym" type="month" v-model="state.queryParam.ym" format="YYYYMM"></zh-form-date>
            <zh-form-cascader
              prop="areaCode"
              label="行政区划"
              :props="{checkStrictly: true,emitPath:false}"
              placeholder="请选择"
              v-model="state.queryParam.areaCode"
              :options="state.areaCodeSelectTreeData"
            ></zh-form-cascader>
					</template>
					<zh-form-query v-model="state.advanced" :form-ref="periodQueryFrom" :table-ref="periodListTable"></zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table
				type="default"
				ref="periodListTable"
				title=""
				funcCode="operationPeriod0001"
				:columns="state.tableColumn"
				:disabled="false"
			>
				<template #operating_edit="{ row }">
					<zh-select
						v-model="row.operating"
						:options="state.dictData.operating"
					></zh-select>
				</template>
				<template #year_edit="{ row }">
					<zh-date  type="year" v-model="row.periodYear"></zh-date>
				</template>
        <template #ym_edit="{ row }">
					<zh-date  type="month" v-model="row.ym" format="YYYYMM"></zh-date>
				</template>
				<template #begTime_edit="{ row }">
					<zh-date type="datetime" v-model="row.begTime" format="YYYY-MM-DD HH:mm:ss"></zh-date>
				</template>
	
				<template #endTime_edit="{ row }">
					<zh-date type="datetime" v-model="row.endTime" format="YYYY-MM-DD  HH:mm:ss"></zh-date>
				</template>
				<template #areaCode_edit="{ row }">
					<zh-cascader
          :props="{checkStrictly: true,emitPath:false}"
					placeholder="请选择"
					v-model="row.areaCode"
					:options="state.areaCodeSelectTreeData"
				></zh-cascader>
				</template>
        <template #messagePrompts_edit="{ row }">
					<zh-input  v-model="row.messagePrompts"></zh-input>
				</template>
        <template #messageTip_edit="{ row }">
					<zh-input  v-model="row.messageTip"></zh-input>
				</template>
				<template #operate="{ row }">
					<div v-func:OPPERIOD0005>
						<el-tooltip placement="top" content="删除">
							<SvgIcon name="ele-Delete" color="#00bfff" @click="deleteRow(row)" />
						</el-tooltip>
					</div>
				</template>
			</zh-table>
		</zh-space>
	</div>
</template>
<script lang="ts" setup name="periodManager">
//------------------定义子组件---------------------------
const periodQueryFrom = ref<any>({});
const periodListTable = ref<any>({});

//------------------内部变量定义-------------------------
const state = reactive({
	description: '业务期管理',
	// 高级搜索 展开/关闭
	advanced: false,
	// 查询参数
	queryParam: { periodYear: new Date().getFullYear()+'', operating: undefined, ym: undefined } as any,
	initRow: {
		periodId: undefined,
		periodYear: new Date().getFullYear()+'',
		operating: undefined,
		ym: undefined,
		begTime: undefined,
		endTime: undefined,
		orgId: undefined,
		areaCode: undefined,
		clientId: undefined,
		periodSameId: undefined,
		remarks: undefined,
	} as any,
	dictData: {} as any,
  areaCodeSelectTreeData: [] as any,
	tableColumn: [
		{ type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'periodId', title: 'ID', align: 'center', visible: false, width: 150 },
		{
			field: 'operating',
			title: '操作期规则',
			fixed: 'left',
			align: 'center',
			width: 200,
			slots: {
				// 使用插槽模板渲染
				default: 'operating_edit',
			},
		},
		{ field: 'periodYear', title: '所属年度', fixed: 'left', align: 'center', width: 150, slots: {
				// 使用插槽模板渲染
				default: 'year_edit',
			}, },
		{ field: 'ym', title: '业务年月', fixed: 'left', align: 'center', width: 150,slots: {
				// 使用插槽模板渲染
				default: 'ym_edit',
			}, },
		{
			field: 'begTime',
			title: '开始时间',
			align: 'center',
			editRender: {},
			width: 200,
			slots: {
				// 使用插槽模板渲染
				default: 'begTime_edit',
			},
		},
		{
			field: 'endTime',
			title: '结束时间',
			align: 'center',
			editRender: {},
			width: 200,
			slots: {
				// 使用插槽模板渲染
				default: 'endTime_edit',
			},
		},
    { field: 'messagePrompts', title: '开始时间前提示', align: 'center',  width: 300 ,slots: {
				// 使用插槽模板渲染
				default: 'messagePrompts_edit',
			},},
    { field: 'messageTip', title: '结束时间后提示', align: 'center', width: 300 ,slots: {
				// 使用插槽模板渲染
				default: 'messageTip_edit',
			},},
		{ field: 'orgId', title: '单位id', align: 'center', visible: false, width: 150 },
		{ field: 'areaCode', title: '统筹区', align: 'center', width: 150 ,slots: {
				// 使用插槽模板渲染
				default: 'areaCode_edit',
			},},
		{ field: 'clientId', title: '应用id', align: 'center', visible: false, width: 150 },
		{ field: 'periodSameId', title: '所属期id', align: 'center', visible: false, width: 150 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, width: 250 },
		{ field: 'operate', title: '操作', align: 'center', width: 150, fixed: 'right', slots: { default: 'operate' } },
	],
	rules: {
		periodYear: [{ required: true, message: '请输入所属年度' }],
		operating: [{ required: true, message: '请输入操作期规则', whitespace: true }],
	},
});

//------------------定义调用方法-------------------------

function save() {
	let params = {
		list: periodListTable.value.getTableData().tableData,
	};
  $api.common.send
			.post('operationPeriod0009', params)
			.then(() => {
				refreshList();
			})
			.catch(() => {});
}
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			state.areaCodeSelectTreeData = res.result;
		});
	}, 20);
}
function clearAll() {
	periodQueryFrom.value.validate((valid) => {
		if (valid) {
			const params = {
				periodYear: state.queryParam.periodYear,
				operating: state.queryParam.operating,
			};
      $api.common.send
			.post('operationPeriod0010', params)
			.then(() => {
				refreshList();
				$messageBox.success('清除成功', '成功提示');
			})
			.catch(() => {});
		}
	});
}
function initData() {
	periodQueryFrom.value.validate((valid) => {
		if (valid) {
			const params = {
				periodYear: state.queryParam.periodYear,
				operating: state.queryParam.operating,
			};
      $api.common.send
			.post('operationPeriod0008', params)
			.then((res) => {
				periodListTable.value.setData(res.result);
				$messageBox.success('初始化成功，请修改后点击保存', '成功提示');
			})
			.catch(() => {});
		}
	});
}
function addRow() {
	let row = periodListTable.value.getCurrentRecord();
	periodListTable.value.insertAt(state.initRow, row);
}
function deleteRow(row) {
	const params = {
		periodId: row.periodId,
	};
	if (params.periodId) {
    $api.common.send
			.post('operationPeriod0006', params)
			.then(() => {
				$messageBox.success('删除成功', '成功提示');
        periodListTable.value.remove(row);
				periodListTable.value.clearCurrentRow();
			})
			.catch(() => {});
	} else {
		periodListTable.value.remove(row);
	}
}
function refreshList() {
	periodListTable.value.refresh(state.queryParam);
}

//------------------初始化------------------------------
// 数据字典初始化
const params = {
	dictFields: 'operating',
};
$api.common.getBatchDict.post(params).then((res) => {
	state.dictData = res.result;
});
getAreaCodeData();
</script>
